<template>
  <div class="box">
    <van-form @submit="submit" ref="form">
      <!-- 文章标题 -->
      <van-field
        v-model="username"
        name="title"
        label="文章标题"
        placeholder="请输入文章内容"
        :rules="[{ required: true, message: '请输入文章内容' }]"
      />
      <!-- 文章分类 -->
      <van-field
        readonly
        clickable
        name="cate"
        :value="value"
        label="文章分类"
        placeholder="请选择文章分类"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <!-- 文章标签 -->
      <van-field
        readonly
        clickable
        name="tags"
        :value="value2"
        label="文章标签"
        placeholder="请选择文章标签"
        @click="showPicker2 = true"
      />
      <van-popup v-model="showPicker2" position="bottom">
        <van-picker
          show-toolbar
          :columns="checkboxGroup"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>
      <van-field name="uploader" label="文件上传">
        <template #input>
          <van-uploader v-model="uploader" :after-read="afterRead" />
        </template>
      </van-field>
      <van-field
        v-model="message"
        name="content"
        rows="4"
        autosize
        label="文章正文"
        type="textarea"
        placeholder="请输入正文内容"
      />
      <br /><br />
    </van-form>
    <van-row type="flex" justify="space-around">
      <van-button icon="plus" type="primary" @click="onSubmit('2')"
        >存草稿</van-button
      >
      <van-button icon="send-gift-o" type="info" @click="onSubmit('1')"
        >修改文章</van-button
      >
      <van-button icon="revoke" type="danger" @click="reset">重置</van-button>
    </van-row>
  </div>
</template>
<script>
import { getCateListApi } from "../api/article";
import { userImgApi, userSubmitApi } from "../api/user";
export default {
  data() {
    return {
      value: "",
      value2: "",
      columns: [],
      showPicker: false,
      showPicker2: false,
      checkboxGroup: [],
      message: "",
      username: "",
      uploader: [],
      pic: "",
      cateid: "",
      infoArr: [],
      status: "",
    };
  },
  methods: {
    // ! 获取渲染数据
    async render() {
      const { data } = await getCateListApi();
      this.infoArr = data.allCate;
      // * 遍历数据
      const arr = data.allCate.map((item) => {
        return item.catename;
      });

      const arr1 = data.allTag.map((item) => {
        return item.tagname;
      });
      // * 追加数组
      this.columns.push(...arr);
      this.checkboxGroup.push(...arr1);
    },
    // ! 分类回显
    onConfirm(value, index) {
      this.value = value;
      this.cateid = this.infoArr[index].id;
      console.log(this.cateid);
      this.showPicker = false;
    },
    // ! 标签回显
    onConfirm2(value) {
      this.value2 = value;
      this.showPicker2 = false;
    },
    // ! 图片地址获取
    async afterRead(file) {
      let fd = new FormData();
      fd.append("file", file.file);
      const {
        data: { savePath },
      } = await userImgApi(fd);
      this.pic = savePath;
    },
    reset() {
      this.username = "";
      this.uploader = [];
      this.value = "";
      this.value2 = "";
      this.message = "";
    },
    submit() {},
    async onSubmit(val) {
      if (this.username === "")
        return this.$toast.fail("标题没有填写 请填写在提交");
      if (this.tags === "")
        return this.$toast.fail("标签没有选择 请选择在提交");
      if (this.cateid === "")
        return this.$toast.fail("文章分类没有选择 请选择在提交");
      if (this.pic === "")
        return this.$toast.fail("图片没有上传 请提交图片在提交");
      if (this.message === "")
        return this.$toast.fail("正文没有填写 请填写在提交");
      const { errno } = await userSubmitApi({
        author: "",
        cateid: this.cateid,
        content: this.message,
        pic: this.pic,
        status: val,
        tags: this.tags,
        title: this.username,
      });
      if (errno === 0) {
        this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "发布成功 跳转我的文章",
        });
        let second = 2;
        const timer = setInterval(() => {
          second--;
          if (second) {
            // Toast.message = ` ${second} 秒跳转登录`;
          } else {
            clearInterval(timer);
            // 手动清除 Toast
            this.$toast.clear();
            
          }
        }, 1000);
      }
    },
  },
  created() {
    this.render();
  },
};
</script>

<style scoped lang="less">
.tags-popup {
  padding: 0 20px;
  h3 {
    font-size: 30px;
    font-weight: normal;
    line-height: 100px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
  }
}
/deep/ .van-field {
  height: 100%;
}
</style>